---
description: На странице представлены основные компоненты для работы с текстом.
---

<Overview group="typography" forcedName="Typography" forcedPath="components/Typography">

# Типографика

На странице представлены основные компоненты для работы с текстом.

</Overview>

## Обзор компонентов [#overview]

<Typography />

## Базовые свойства

### weight

Определяет насыщенность шрифта со значениями `'1' | '2' | '3'`, где `'3'` - обычное начертание,
а `'1'` - самое жирное (используются токены семейства `--vkui--font_weight_base[1,2,3]`).

<Playground>
  ```jsx
  <Text weight="1">Жирный текст</Text>
  ```
</Playground>

### useAccentWeight

Позволяет использовать акцентную насыщенность (токены семейства `--vkui--font_weight_accent[1,2,3]`).
Использование возможно только при явном указании свойства `weight`.

<Playground>
  ```jsx
  <Text weight="1" useAccentWeight>
    Акцентная жирная насыщенность для текста
  </Text>
  ```
</Playground>

### normalize

Позволяет "нормализовать" компонент, делая его блочным и отключая браузерные отступы.
По умолчанию `true` для всех типографических компонентов, кроме `Paragraph`.

<Playground>
  ```jsx
  <Paragraph Component="p" normalize>
    Текст в теге &lt;p&gt;
  </Paragraph>
  ```
</Playground>

### Component

Позволяет переопределить тег, в котором рендерится контент. По умолчанию значение `span`.
Обратите внимание на использование свойства `normalize` для отключения браузерных стилей тега `p`.

<Playground>
  ```jsx
  <Paragraph Component="p" normalize>
    Текст в теге &lt;p&gt;
  </Paragraph>
  ```
</Playground>

### inline

Задает `display: inline-block`, для возможности строчного отображения компонента. Полезно, когда необходимо
расположить разные типографические компоненты в строку.

<Playground>
  ```jsx
  <Text inline>Основной текст</Text> <Caption inline>(мелкая подпись)</Caption>
  ```
</Playground>

### align

Свойство позволяет задать выравнивание текста в блоке, не имеет эффекта в строчном представлении текста (свойство `inline={true}`).

import { BlockWrapper } from '@/components/wrappers';

<Playground Wrapper={BlockWrapper}>
  ```jsx
  <Text align="end">У текста нестандартное выравнивание</Text>
  ```
</Playground>

## Уникальные свойства

### level

Ряд компонентов (`DisplayTitle`, `Title`, `Headline` и `Caption`) обладают свойством `level`.
Оно позволяет определить иерархию типографики, схожую со стандартными тегами `<h1>...<h6>`,
где `level="1"` самый крупный вариант шрифта и далее по нисходящей. Для того, чтобы узнать, сколько
уровней поддерживает тот или иной компонент, обратитесь к документации компонентов [выше](#overview).

### caps

Компоненты `Footnote` и `Caption` поддерживают свойство `caps`, которое трансформирует все буквы в заглавные.

## Как устроено

Каждый компонент типографики задаёт параметры шрифта (`font-family`, `font-size`, `font-weight`, `line-height`),
которые будут применяться ко всему вложенному текстовому контенту, полагаясь на значения собственных токенов.

Например, для `Headline` существует следующий набор токенов:

```css
--vkui--font_headline1--font_family--regular
--vkui--font_headline1--font_family--compact

--vkui--font_headline1--font_size--regular
--vkui--font_headline1--font_size--compact

--vkui--font_headline1--font_weight--regular
--vkui--font_headline1--font_weight--compact

--vkui--font_headline1--line_height--regular
--vkui--font_headline1--line_height--compact


--vkui--font_headline2--font_family--regular
--vkui--font_headline2--font_family--compact

--vkui--font_headline2--font_size--regular
--vkui--font_headline2--font_size--compact

--vkui--font_headline2--font_weight--regular
--vkui--font_headline2--font_weight--compact

--vkui--font_headline2--line_height--regular
--vkui--font_headline2--line_height--compact
```

В сумме 16 токенов для `regular`/`compact` представлений. В разных [темах](/overview/themes)
могут быть свои значения токенов.

При стандартном использовании вам не нужно задумываться о применении `regular`/`compact`-токенов, потому что
этим управляет `VKUI`, однако, если вы хотите "зафиксировать" параметры шрифта, можно любой компонент типографики
обернуть в `AdaptivityProvider` с нужным значением:

```jsx
<AdaptivityProvider sizeY="regular">
  <Text>Всегда regular-значения токенов</Text>
</AdaptivityProvider>
```

### Своё семейство шрифтов

Если вам не подходит значение `font-family` по-умолчанию или в выбранной теме, то вы можете переопределить значение
токенов на своё значение, но сделать это будет нужно для всех токенов типографики.
В качестве примера можно обратиться к нашей [настройке окружения](https://github.com/VKCOM/VKUI/blob/master/packages/vkui/playwright/index.css) для e2e-тестирования.

Непосредственно подключить свой шрифт необходимо самостоятельно, руководствуясь выбранными фреймворками и системой сборки.

## Как использовать

Оберните текст или другие элементы, к которым вы хотите применить нужные параметры шрифта, выбранным тегом:

```jsx
<Title>Мой заголовок</Title>

<Text Component="div">
  {/* Параметры шрифта применятся для любого вложенного контента. */}
  {children}
</Text>
```

Если вы используете готовые компоненты `VKUI` (например, [`Header`](/components/group#header) или [`SimpleCell`](/components/simple-cell)) вам не нужно задумываться о
выборе конкретного компонента типографики, потому что подходящие уже применяются внутри компонентов библиотеки.
Если вы делаете свои компоненты на базе `VKUI`, то при выборе компонентов типографики ориентируйтесь на назначение
каждого компонента.

## Свойства и методы [#api]

<PropsTable name={["Typography/DisplayTitle/DisplayTitle", "Typography/Title/Title", "Typography/Headline/Headline", "Typography/Text/Text", "Typography/Paragraph/Paragraph", "Typography/Subhead/Subhead", "Typography/Footnote/Footnote", "Typography/Caption/Caption"]}>
### DisplayTitle [#display-title-api]

### Title [#title-api]

### Headline [#headline-api]

### Text [#text-api]

### Paragraph [#paragraph-api]

### Subhead [#subhead-api]

### Footnote [#footnote-api]

### Caption [#caption-api]

</PropsTable>
